<template>
    <div>
        <el-dialog center class="global-dialog" v-model="dialogVisable" width="1200px" top="10vh" :show-close="true"
            :close-on-click-modal="false" @close="close">
            <template #title>
                <div class="my-header"   v-loading="detail_loading">
                    <el-tabs v-model="tabId" class="demo-tabs">
                        <el-tab-pane label="基本信息" name="1">
                            <h1 class="title">
                               <p>{{ diaForm.unitName }}</p>
                                <span>总分：{{ diaForm.patentMark }}</span>
                            </h1>

                            <div class="banner">
                                <div class="item">
                                    <div class="left">
                                        <h3>有效专利总数：</h3>
                                        <p>
                                            最高： <span> {{ diaForm.lastVaildCount }}</span>个  &nbsp;&nbsp;&nbsp;
                                            公司个数：<el-input type="number" v-model="diaForm.vaildCount" :min="0" maxlength="5" show-word-limit  clearable></el-input>
                                        </p>
                                        <p>最高值：100,&nbsp;&nbsp; 公司值：{{ detail2Data.vaildCount }},&nbsp;&nbsp; 得分：{{ detail2Data.vaildCount/100*100*22/161 }}</p>
                                    </div>
                                    <div class="right">
                                        <h3>有效发明专利数量：</h3>
                                        <p>
                                            最高： <span>  {{ diaForm.lastVaildInventionCount }}</span>个 &nbsp;&nbsp;&nbsp;
                                            公司个数：<el-input type="number" v-model="diaForm.vaildInventionCount" :min="0" maxlength="5" show-word-limit  clearable></el-input>
                                        </p>
                                        <p>最高值：100, &nbsp;&nbsp;公司值{{ detail2Data.vaildInventionCount }},&nbsp;&nbsp; 得分：{{ detail2Data.vaildInventionCount/100*100*22/161 }}</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="left">
                                        <h3>当年发明专利占比：</h3>
                                        <p>
                                            最高： <span>  {{ diaForm.lastInventionYearPercent }}</span>  &nbsp;&nbsp;&nbsp;
                                            公司占比：<el-input  v-model="diaForm.inventionYearPercent" maxlength="10" show-word-limit  clearable></el-input>
                                        </p>
                                        <p>最高值：100,&nbsp;&nbsp; 公司值：{{ detail2Data.inventionYearPercent }},&nbsp;&nbsp; 得分：{{ detail2Data.inventionYearPercent ? Number(detail2Data.inventionYearPercent.replace('%',''))/100*100*22/161  : 0 }}</p>
                                    </div>
                                    <div class="right">
                                        <h3>海外专利占比：</h3>
                                        <p>
                                            最高： <span>  {{ diaForm.lastAbroadPercent }}</span> &nbsp;&nbsp;&nbsp;
                                            公司占比：<el-input v-model="diaForm.abroadPercent" maxlength="10" show-word-limit  clearable></el-input>
                                        </p>
                                        <p>最高值：100, &nbsp;&nbsp;公司值：{{ detail2Data.abroadPercent }},&nbsp;&nbsp; 得分：{{ detail2Data.abroadPercent ? Number(detail2Data.abroadPercent.replace('%',''))/100*100*22/161  : 0 }}</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="left">
                                        <h3>当年专利申请量：</h3>
                                        <p>
                                            最高： <span>  {{ diaForm.lastApplyYearCount }}</span>个  &nbsp;&nbsp;&nbsp;
                                            公司个数：<el-input type="number" v-model="diaForm.applyYearCount" :min="0" maxlength="5" show-word-limit  clearable></el-input>
                                        </p>
                                        <p>最高值：100,&nbsp;&nbsp; 公司值：{{ detail2Data.applyYearCount }},&nbsp;&nbsp; 得分：{{ detail2Data.applyYearCount/100*100*22/161 }}</p>
                                    </div>
                                    <div class="right">
                                        <h3>当年PCT申请量：</h3>
                                        <p>
                                            最高： <span>  {{ diaForm.lastTcpApplyYearCount }}</span>个 &nbsp;&nbsp;&nbsp;
                                            公司个数：<el-input type="number" v-model="diaForm.tcpApplyYearCount" :min="0" maxlength="5" show-word-limit  clearable></el-input>
                                        </p>
                                        <p>最高值：100, &nbsp;&nbsp;公司值：{{ detail2Data.tcpApplyYearCount }},&nbsp;&nbsp; 得分：{{ detail2Data.tcpApplyYearCount/100*100*22/161 }}</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="left">
                                        <h3>中国专利奖优秀奖：</h3>
                                        <p>
                                            最高： <span>  {{ diaForm.lastDomesticAwardCount }}</span>个  &nbsp;&nbsp;&nbsp;
                                            公司个数：<el-input type="number" v-model="diaForm.domesticAwardCount" :min="0" maxlength="5" show-word-limit  clearable></el-input>
                                        </p>
                                        <p>最高值：100,&nbsp;&nbsp; 公司值：{{ detail2Data.domesticAwardCount }},&nbsp;&nbsp; 得分：{{ detail2Data.domesticAwardCount/100*100*22/161 }}</p>
                                    </div>
                                    <div class="right">
                                        <h3>每万名员工有效专利数量：</h3>
                                        <p>
                                            最高： <span>  {{ diaForm.lastObtainPerTenThousand }}</span>个 &nbsp;&nbsp;&nbsp;
                                            公司个数：<el-input type="number" v-model="diaForm.obtainPerTenThousand" :min="0" maxlength="5" show-word-limit  clearable></el-input>
                                        </p>
                                        <p>最高值：100, &nbsp;&nbsp;公司值：{{ detail2Data.obtainPerTenThousand }},&nbsp;&nbsp; 得分：{{ detail2Data.obtainPerTenThousand/100*100*22/161 }}</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="left">
                                        <h3>每亿元研发投入取得发明专利数量：</h3>
                                        <p>
                                            最高： <span>  {{ diaForm.lastObtainPerMillion }}</span>个  &nbsp;&nbsp;&nbsp;
                                            公司个数：<el-input type="number" v-model="diaForm.obtainPerMillion" :min="0" maxlength="5" show-word-limit  clearable></el-input>
                                        </p>
                                        <p>最高值：100,&nbsp;&nbsp; 公司值：{{ detail2Data.obtainPerMillion }},&nbsp;&nbsp; 得分：{{ detail2Data.obtainPerMillion/100*100*22/161 }}</p>
                                    </div>
                                    <div class="right">

                                    </div>
                                </div>
                            </div>
                            <!-- <el-form :model="diaForm" ref="DiaFormRef" :rules="rules" status-icon label-width="110px" status>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="授权号" prop="grantCode">
                                            <el-input placeholder="请输入" style="width: 100%"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="申请号" prop="applyCode">
                                            <el-input placeholder="请输入" style="width: 100%"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form> -->
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </template>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close">关闭</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getDictionary } from "@/views/science/api/academic";
import { addInformation2, getDetailById } from "@/views/science/api/patent";
import PlatformFiles from '@/views/science/components/platformFiles/platformFiles.vue';
import Record from '@/views/science/components/record/record.vue';
import { tips } from "@/views/science/components/tips/tips";
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import EditInformation from './editInformation.vue';
import Tag from './tag.vue';

export default {
    components: { PlatformFiles, Record,EditInformation,Tag},
    props: {
        dialogVisable: {
            type: Boolean,
            default: false,
        },
        detail2Data: {
            type: Object,
        }
    },
    emits:{
        changeTag:null
    },
    setup(props, { emit }) {
        // 发送请求
        onMounted(() => {
        });

        let DiaFormRef = ref();
        let data = reactive({
            tabId:'1',
            diaForm:props.detail2Data,
            detail_loading:false,
        });

        // 规则校验
        let rules = reactive();
        // 著作级别,编著属性,技术分类,语言,企业排名===>数据字典
        let getCodeList = () => {
            getDictionary(['KJSL_SIMPLE_LEGAL_EVENTS','KJSL_LEGAL_STATUS','KJSL_PATENT_TYPE','KJSL_ACADEMIC_WORK_LEVEL', 'KJSL_SOFT_STATE', 'KJSL_BUSINESS_SECTOR', 'KJSL_LANGUAGE', 'KJSL_ENTERPRISE_RANKING']).then((res) => {

            });
        };

        // 保存
        let save = () => {
            addInformation2(data.diaForm).then(res =>{
                if(res.data.code == 200){
                    tips("保存成功", "success");
                    close()
                }
            })
        }
        // 通过详情查询id
        let getDetail = async (id) => {
            let res = await getDetailById(id);
            console.log('getDetail',res);

        };
        watch(() => props.detail2Data,() => {
                Object.assign(data.diaForm,props.detail2Data)
                console.log('watch',data.diaForm)

            },{ deep: true, immediate: true }
        );
        watch(data.diaForm, (newValue, oldValue) => {
            // emit("changeTag", diaForm);
            });
        // 关闭
        let close = () => {
            // DiaFormRef.value.resetFields();
            emit("closeDialog2");
        };

        return {
            DiaFormRef,
            rules,
            getCodeList,
            ...toRefs(data),
            close,
            save,
            getDetail,
        };
    },
};
</script>

<style scoped lang="scss">
.dialog-footer {
    display: flex;
    justify-content: end;
}

:deep(.el-dialog__body) {
    display: none;
}

// 滚动条
:deep(.demo-tabs > .el-tabs__content) {
    max-height: 550px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.title{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-left: 120px;
    p{
        margin: 10px 20px 10px 0;
    }
    span{
        font-size: 16px;
        font-weight: normal;
    }
}
.banner{
    .item{
        display: flex;
        border-top: 1px dashed;
        .left,.right{
            flex: 1;
            p{
                display: flex;
                display: flex;
                align-items: center;
                .el-input{
                    width: 120px;
                }
            }
        }
    }
}
</style>
